<template>
  <view>
    <view>
      <view class="answer">
        <view class="navs flex align-start justify-between" v-if="title">
          <view class="nav-titles flex align-start">
            <image src="/static/chapter/chapter.png" mode=""></image>
            <text class="nav-title">
              {{ title }}
            </text>
          </view>
          <view class="nums">
            <text>{{ currentPage }}/{{ allList.length }}</text>
          </view>
        </view>
        <view class="navs flex align-center " v-else>
          <image src="/static/chapter/chapter.png" mode=""></image>
          <view class="nums">
            <text>{{ currentPage }}/{{ allList.length }}</text>
          </view>
        </view>
        <view class="card">
          <view>
            <scroll-view style="height: 100%;" :scroll-top="scrollTop[index]" class="scroll-Y"
              @scroll="scroll($event, index)">
              <subject v-if="thisdet.options != null && !is_explain" :info="thisdet" @change="handChange"
                :analysis="true" :is_explain="is_explain">
                <template #no>
                  <text class="nums">{{ currentPage }}/{{ allList.length }}</text>
                </template>
              </subject>
              <!-- 解析答案 -->
              <jxSubject v-if="is_explain" :info="thisdet" @change="handChange" :analysis="true"
                :is_explain="is_explain" :jxQuestions="jxQuestions"></jxSubject>
              <view>
                <view class="tools">
                  <view class="tool" @click="handMusic(thisdet)">
                    <text>读题</text>
                    <image src="/static/skill/tool1.png" mode=""></image>
                  </view>
                  <view class="tool" @click="collChange(thisdet)">
                    <text>收藏</text>
                    <image v-if="thisdet.is_collect" src="/static/skill/coll-a.png" mode="">
                    </image>
                    <image v-else src="/static/skill/coll.png" mode=""></image>
                  </view>
                </view>
                <view style="width: 750rpx;height: 170rpx;"></view>
              </view>
              <view class="tools">
                <view class="bottom_bg">
                  <view class="bottom_left_bg" @click="show = true">
                    <image src='@/static/topical.png' class="left_img"></image>
                    <view class="left_title">
                      <text>{{ currentPage }}/{{ allList.length }}</text>
                    </view>
                  </view>
                  <view class="bottom_left_bg" style="width: 70rpx;" @click="handSkill(thisdet)">
                    <image src="@/static/skill/skill.png" class="left_img"></image>
                    <view class="left_title">
                      技巧
                    </view>
                  </view>
                  <view class="bottom_btn" @click="handUp">上一题</view>
                  <view class="bottom_btn" style="background-color: #03BE7A;color: #FFFFFF;"
                    @tap="$u.debounce(handNext, 100)">下一题
                  </view>
                </view>
              </view>
            </scroll-view>
          </view>
        </view>
        <skill-pop ref="skill" @music="musicChange" @close="closeMusic" />
        <u-modal v-model="lastShow" :content="lastContent" show-cancel-button confirm-color="#03BE7A"
          @confirm="handContinue"></u-modal>
        <u-popup v-model="show" mode='bottom' border-radius="28">
          <view class="pop_bg">
            <view style="display: flex;align-items: center;margin-top: 48rpx;">
              <view style="display: flex;align-items: center;" @click="collChange(thisdet)">
                <view class="collect_ttile">收藏</view>
                <image v-if="thisdet.is_collect" src="/static/skill/coll-a.png"
                  style="width: 40rpx;height: 40rpx;margin-left: 12rpx;"></image>
                <image v-else src="@/static/no_collect.png" style="width: 40rpx;height: 40rpx;margin-left: 12rpx;">
                </image>
              </view>
              <view style="margin-left: 88rpx;">
                <u-icon name="checkmark-circle-fill" color="#36C269" size="44"></u-icon>
              </view>
              <view class="number" v-if="!is_explain">{{ chance_correct }}</view>
              <view class="number" v-if="is_explain">{{ jxCorrect }}</view>
              <view style="margin-left: 25rpx;">
                <u-icon name="close-circle-fill" color="#FF0000" size="44"></u-icon>
              </view>
              <view class="number" v-if="!is_explain">{{ chance_error }}</view>
              <view class="number" v-if="is_explain">{{ allList.length - jxCorrect }}</view>
              <view class="pop_number">
                {{ currentPage }}/{{ allList.length }}
              </view>
            </view>
            <view class="pop_line"></view>
            <scroll-view class="scroll-view" scroll-y="true" :scroll-top="scrollTop">
              <view style="display: flex;flex-wrap: wrap;margin-top: -26rpx;" v-if="!is_explain">
                <view v-for="(item, index) in allList" :key="index" @click="chance_question(item, index)">
                  <view class="tag_bg" v-if="item.istrue == undefined">{{ index + 1 }}</view>
                  <view class="tag_bg" style="background-color: #36c269;color: #FFFFFF;" v-if="item.istrue == 1">
                    {{ index + 1 }}
                  </view>
                  <view class="tag_bg" style="background-color: #ff0000;color: #FFFFFF;" v-if="item.istrue == 0">
                    {{ index + 1 }}
                  </view>
                </view>
              </view>
              <!-- 解析 -->
              <view style="display: flex;flex-wrap: wrap;margin-top: -26rpx;" v-else>
                <view v-for="(item, index) in allList" :key="index" @click="chance_question(item, index)">
                  <view class="tag_bg" v-if="item.user_answer == undefined">{{ index + 1 }}</view>
                  <view class="tag_bg" style="background-color: #36c269;color: #FFFFFF;"
                    v-else-if="item.user_answer == item.answer_true">
                    {{ index + 1 }}
                  </view>
                  <view class="tag_bg" style="background-color: #ff0000;color: #FFFFFF;" v-else>
                    {{ index + 1 }}
                  </view>
                  <!-- <view class="tag_bg" v-if="item.istrue == undefined">{{ index + 1 }}</view> -->
                  <!-- <view class="tag_bg" style="background-color: #36c269;color: #FFFFFF;" v-if="item.istrue == 1">
                    {{ index + 1 }}
                  </view>
                  <view class="tag_bg" style="background-color: #ff0000;color: #FFFFFF;" v-if="item.istrue == 0">
                    {{ index + 1 }}
                  </view> -->
                </view>
              </view>
            </scroll-view>
          </view>
        </u-popup>
      </view>
    </view>
  </view>
</template>

<script>
import subject from '@/components/subject.vue'
import jxSubject from '@/components/jxSubject.vue'
import skillPop from '../skill/components/skillPop.vue'
import {
  doAnswer,
  doAllAnswer,
  doChapterDetail,
  doView,
  getViewRecord,
  doRecord,
  doErrRecord,
  doErrList,
  doColl,
  doCollList,
  oneQuestionDetail,
  addAnswerRecord,
  getAnswerRecord,
  doEXamMockList
} from '@/api/home.js'
let innerAudioContext = null
export default {
  components: {
    skillPop,
    subject,
    jxSubject
  },
  data () {
    return {
      timer: null,
      lastShow: false,
      lastContent: '',
      type: 0,
      loading: true,
      current: 0,
      currentPage: 0,
      allList: [],
      idlist: [],
      title: '',
      list: [],
      swiperList: [],
      scrollTop: [],
      old: [],
      lastId: '',
      paperId: '',
      // 选项正确错误个数
      chance_correct: 0,
      chance_error: 0,
      show: false,
      ids: [],
      //当前题目Id
      qid: '',
      isloding: true,
      //下一题
      listcurret: 1,
      // 本题数据
      thisdet: {},
      // 上一次看到
      lastdet: {},
      city: '',
      // 答题的对错记录
      maplist: [],
      // 是否是答案解析
      is_explain: false,
      // 解析答案数据
      jxQuestions: [],
      jxCorrect: 0, // 解析正确的个数
    }
  },
  async onLoad (options) {
    console.log(options, 'options');

    this.paperId = options.id
    this.type = options.type || '0'
    if (options.city != undefined) {
      this.city = options.city
    } else {
      this.city = options.name
    }
    if (options.type == 1) {
      uni.setNavigationBarTitle({
        title: '章节练习'
      })
      await this.getList(options.id)
      this.title = options.name
    } else if (options.type == 2) {
      uni.setNavigationBarTitle({
        title: '我的错题'
      })
      await this.getList(options.id)
    } else if (options.type == 3) {
      uni.setNavigationBarTitle({
        title: '我的收藏'
      })
      await this.getList(options.id)
    } else if (options.type == 4) {
      uni.setNavigationBarTitle({
        title: '答案解析'
      })
      await this.getAnswerList(options.id)
    } else {
      this.lastId = options.latestId ? Number(options.latestId) : 0
      uni.setNavigationBarTitle({
        title: '顺序练习'
      })
      // this.getChapterDetail(options.id)
      // uni.showLoading({
      // 	title: '试题加载中'
      // })
      await this.getList(options.id)
      // await this.getview(options.type, options.id)
    }
    if (options.type != 2 && options.type != 3) {
      this.hview()
    }
    // if (this.lastId) {
    // 	const index = this.allList.findIndex(el => el.id == this.lastId) + 1
    // 	if (index > 2) {
    // 		this.lastContent = `上次看到${index - 1}题，是否继续?`
    // 		this.lastShow = true
    // 	}
    // }
    // this.swiperList = this.allList.filter((el, index) => index <= 4)
    this.current = 1
    this.currentPage = 1

    // this.$nextTick(() => {
    // 	this.loading = false
    // })
  },
  onUnload () {
    this.closeMusic()
  },
  methods: {
    //添加错题记录
    async goerror (city, questionid) {
      const {
        data
      } = await doErrRecord({
        city: city,
        question_id: questionid
      })
    },
    //技巧
    handSkill (e) {
      this.$refs.skill.showEdit(e.skill)
    },
    //添加答题记录
    async addanswer () {
      let type = ''
      let chapter_id = null
      if (this.type == 0) {
        type = 'paper'
      }
      if (this.type == 1) {
        type = 'chapter'
        chapter_id = this.paperId
      }
      if (this.type == 2) {
        type = 'voice'
      }
      let query = {}
      if (this.type == 1) {
        query = {
          from: 'bank',
          type: type,
          chapter_id: chapter_id,
          city: this.city,
          list: this.maplist
        }
      } else {
        query = {
          from: 'bank',
          type: type,
          city: this.city,
          list: this.maplist
        }
      }
      const {
        data
      } = await addAnswerRecord(query)
    },
    //获取答题记录
    async getAnswer () {
      let type = ''
      let chapter_id = null
      if (this.type == 0) {
        type = 'paper'
      }
      if (this.type == 1) {
        type = 'chapter'
        chapter_id = this.paperId
      }
      if (this.type == 2) {
        type = 'voice'
      }
      let query = {}
      if (this.type == 1) {
        query = {
          from: 'bank',
          type: type,
          chapter_id: chapter_id,
          city: this.city,
        }
      } else {
        query = {
          from: 'bank',
          type: type,
          city: this.city,
        }
      }
      const {
        data,
      } = await getAnswerRecord(query)

      if (data != null) {
        if (data.list.length != 0) {
          for (let i = 0; i < data.list.length; i++) {
            for (let j = 0; j < this.allList.length; j++) {
              if (this.allList[j].id_ == data.list[i].id) {
                this.allList[j]['istrue'] = data.list[i].ischancetrue
                if (data.list[i].ischancetrue == 0) {
                  this.chance_error += 1
                } else {
                  this.chance_correct += 1
                }
              }
            }
          }
          this.$forceUpdate()
        }
      }
    },
    //添加浏览记录
    async getview () {
      let type = ''
      let chapter_id = null
      if (this.type == 0) {
        type = 'paper'
      }
      if (this.type == 1) {
        type = 'chapter'
        chapter_id = this.paperId
      }
      if (this.type == 2) {
        type = 'voice'
      }
      const {
        data
      } = await doView({
        from: 'bank',
        type: type,
        chapter_id: chapter_id,
        question_id: this.allList[this.listcurret - 1].id_,
        question_no: this.currentPage + 1,
        city: this.city
      })
    },
    //获取浏览记录
    async hview () {
      let type = ''
      let chapter_id = null
      if (this.type == 0) {
        type = 'paper'
      }
      if (this.type == 1) {
        type = 'chapter'
        chapter_id = this.paperId
      }
      if (this.type == 2) {
        type = 'voice'
      }
      const {
        data,
      } = await getViewRecord({
        from: 'bank',
        type: type,
        chapter_id: chapter_id,
        city: this.city
      })
      this.lastdet = data
      if (this.lastdet != null) {
        if (this.lastdet.question_no - 1 > 1) {
          this.lastContent = `上次看到${this.lastdet.question_no - 1}题，是否继续?`
          this.lastShow = true
        }
      }
    },
    // 继续做题
    handContinue () {
      this.currentPage = this.lastdet.question_no - 1
      this.listcurret = this.lastdet.question_no - 1
      this.getonequestion('continue')
    },
    //选择题目
    chance_question (item, index) {
      this.currentPage = index + 1
      this.listcurret = index + 1
      this.show = false
      // let id = ''
      // if (this.type != 2 && this.type != 3) {
      // 	id = this.allList[this.listcurret - 1].id_
      // } else {
      // 	id = this.allList[this.listcurret - 1].question_id
      // }
      // const isResult = this.swiperList.find(el => el.id_ == id)
      // if (isResult != undefined) {
      // 	this.thisdet = isResult
      // } else {
      this.getonequestion('continue')
      // }
    },
    //读题
    handMusic (e) {
      const url = e.voice_file
      this.closeMusic()
      innerAudioContext = uni.createInnerAudioContext();
      innerAudioContext.obeyMuteSwitch = false;
      innerAudioContext.autoplay = true;

      innerAudioContext.src = url;
      innerAudioContext.onPlay(() => {

      });
    },
    musicChange (url) {
      this.closeMusic()
      innerAudioContext = uni.createInnerAudioContext();
      innerAudioContext.obeyMuteSwitch = false;
      innerAudioContext.autoplay = true;
      innerAudioContext.src = url;
      innerAudioContext.onPlay(() => {

      });
    },
    //收藏
    async collChange () {
      const {
        data
      } = await doColl({
        city: this.thisdet.city_,
        question_id: this.thisdet.id_
      })
      this.thisdet.is_collect = !this.thisdet
        .is_collect
      if (this.thisdet.is_collect) {
        uni.showToast({
          title: '收藏成功',
          icon: 'none'
        })
      } else {
        uni.showToast({
          title: '取消收藏成功',
          icon: 'none'
        })
      }
      this.$forceUpdate()
    },
    // 关闭读题
    closeMusic () {
      if (innerAudioContext) {
        innerAudioContext.destroy()
        innerAudioContext = null
      }
    },
    // 考试答案解析
    async getAnswerList (id) {
      try {
        const { data } = await doEXamMockList({ mock_exam_id: id });
        const { is_explain, questions = [] } = data;
        console.log(questions, '我的答案');

        this.is_explain = is_explain;
        this.allList = questions;
        this.jxQuestions = [...questions];
        this.scrollTop = [];
        this.old = [];

        if (questions.length > 0) {
          this.qid = questions[this.currentPage]?.id_ || null;
          this.getonequestion();
        }
      } catch (error) {
        console.error('加载试卷记录失败:', error);
      }
    },
    async getList (id) {
      const infos = {
        0: doAllAnswer,
        1: doAnswer,
        2: doErrList,
        3: doCollList,
      }
      if (this.type == 0 || this.type == 3 || this.type == 2) {
        const {
          data
        } = await infos[this.type]({
          city: this.city
        })
        this.scrollTop = []
        this.old = []
        this.allList = data
        const index = data.findIndex(el => el.type_ === '3')
        this.qid = this.allList[this.currentPage].id_
        this.getonequestion()
      }
      if (this.type == 1) {
        const {
          data
        } = await infos[this.type](id)
        this.scrollTop = []
        this.old = []
        this.allList = data
        this.qid = this.allList[this.currentPage].id_
        this.getonequestion()
      }

      if (this.type != 2 && this.type != 3) {
        this.getAnswer()
      }
    },
    // 获取题目
    async getonequestion (e) {
      let id = ''
      if (this.type != 2 && this.type != 3) {
        id = this.allList[this.listcurret - 1].id_
      } else {
        id = this.allList[this.listcurret - 1].question_id
      }
      console.log(this.allList, 'this.allList');
      const {
        data,
      } = await oneQuestionDetail(id)
      data.index = this.listcurret
      if (data.type_ == 2 || data.type_ == 3) {
        var options = [{
          options_name: data.an1_,
          zIndex: 'A',
          value: 1
        },
        {
          options_name: data.an2_,
          zIndex: 'B',
          value: 2
        },
        {
          options_name: data.an3_,
          zIndex: 'C',
          value: 3
        },
        {
          options_name: data.an4_,
          zIndex: 'D',
          value: 4
        },
        {
          options_name: data.an5_,
          zIndex: 'E',
          value: 5
        },
        {
          options_name: data.an6_,
          zIndex: 'F',
          value: 6
        },
        {
          options_name: data.an7_,
          zIndex: 'G',
          value: 7
        },
        {
          options_name: data.an8_,
          zIndex: 'H',
          value: 8
        },
        {
          options_name: data.an9_,
          zIndex: 'I',
          value: 9
        },
        {
          options_name: data.an10_,
          zIndex: 'J',
          value: 10
        },
        ]
      }
      if (data.type_ == 1) {
        var options = [{
          options_name: '正确',
          zIndex: 'A',
          value: 1
        },
        {
          options_name: '错误',
          zIndex: 'B',
          value: 2
        },
        ]
      }
      if (data.voice_file) {
        data.voice_file = data.voice_file.replace('http:', 'https:')
      }
      let istrues = this.$u.deepClone(data.answer_true)
      data.options = options
      data.istrue = istrues
      data.result = istrues
      data.answer_true = ''
      data.selectValue = ''
      if (data.type_ == 3) {
        // data.istrue = Number(data.istrue)
        data.istrue = data.istrue.toString().split(` `).map(el => {
          return Number(el)
        }).sort()
      }
      data.isfinish = false
      data.iscorrect = ''
      data.goods_ds = []

      if (this.type == 4) {
        let matchedItems = [];
        this.jxQuestions.forEach(item => {
          if (item.id_ === data.id_) {
            data.user_answer = item.user_answer || '';
            matchedItems.push(item);
          }
        });
        this.jxCorrect = matchedItems.length;
      }

      this.thisdet = { ...data };
      if (this.listcurret != 1 && e == undefined) {
        this.currentPage = this.currentPage + 1
      }
      if (this.type != 2 && this.type != 3) {
        this.getview()
        // this.addanswer()
      }
    },
    //上一页
    handUp () {
      if (this.currentPage == 1) {
        uni.showToast({
          title: '当前已是第一题',
          icon: 'none'
        })
        return
      }
      this.currentPage = this.currentPage - 1
      this.listcurret = this.listcurret - 1
      let id = ''
      if (this.type != 2 && this.type != 3) {
        id = this.allList[this.listcurret - 1].id_
      } else {
        id = this.allList[this.listcurret - 1].question_id
      }
      const isResult = this.swiperList.find(el => el.id_ == id)
      if (isResult != undefined) {
        this.thisdet = isResult
      } else {
        this.getonequestion("last")
      }
    },
    handNext () {
      if (this.allList.length == this.currentPage) {
        uni.showToast({
          title: '已经到最后一题了',
          icon: 'none'
        })
        return
      }
      this.qid = this.allList[this.currentPage - 1].id_
      this.listcurret = this.listcurret + 1
      let id = ''
      if (this.type != 2 && this.type != 3) {
        id = this.allList[this.listcurret - 1].id_
      } else {
        id = this.allList[this.listcurret - 1].question_id
      }
      const isResult = this.swiperList.find(el => el.id_ == id)
      if (isResult != undefined) {
        this.currentPage = this.currentPage + 1
        this.thisdet = isResult
      } else {
        this.getonequestion()
      }
      this.closeMusic()
    },
    //selectValue 不为空为对 多选题判断选择数组相等
    handChange (e, info) {
      if (this.thisdet.type_ == '3') {
        this.thisdet = info
      }
      // this.thisdet
      //单选判断
      if (this.thisdet.type_ != '3') {
        if (this.thisdet.istrue == e) {
          this.thisdet.answer_true = e
          this.thisdet.selectValue = e
          // 判断是否之前有值有的话相应改变
          if (this.allList[this.listcurret - 1].istrue == undefined)
            this.chance_correct = this.chance_correct + 1
          if (this.allList[this.listcurret - 1].istrue == 0) {
            this.chance_error = this.chance_error - 1
            this.chance_correct = this.chance_correct + 1
          }
          this.allList[this.listcurret - 1].istrue = 1
          // console.log('111')
        } else {
          this.thisdet.selectValue = e
          // 判断是否之前有值有的话相应改变
          if (this.allList[this.listcurret - 1].istrue == undefined)
            this.chance_error = this.chance_error + 1
          if (this.allList[this.listcurret - 1].istrue == 1) {
            this.chance_correct = this.chance_correct - 1
            this.chance_error = this.chance_error + 1
          }
          this.goerror(this.thisdet.city_, this.thisdet
            .id_)
          this.allList[this.listcurret - 1].istrue = 0
        }
      }
      // 多选题
      else {
        //对比是否数组相等
        const isArrEqual = (arr1, arr2) => {
          return arr1.length === arr2.length && arr1.every((ele) => arr2.includes(ele));
        };
        if (isArrEqual(this.thisdet.istrue, e)) {
          if (this.allList[this.listcurret - 1].istrue == undefined)
            this.chance_correct = this.chance_correct + 1
          if (this.allList[this.listcurret - 1].istrue == 0) {
            this.chance_error = this.chance_error - 1
            this.chance_correct = this.chance_correct + 1
          }
          this.thisdet.answer_true = e
          this.thisdet.selectValue = e
          this.allList[this.listcurret - 1].istrue = 1
        } else {
          if (this.allList[this.listcurret - 1].istrue == undefined)
            this.chance_error = this.chance_error + 1
          if (this.allList[this.listcurret - 1].istrue == 1) {
            this.chance_correct = this.chance_correct - 1
            this.chance_error = this.chance_error + 1
          }
          this.thisdet.selectValue = e
          this.goerror(this.thisdet.city_, this.thisdet
            .id_)
          this.allList[this.listcurret - 1].istrue = 0
        }
      }
      if (this.thisdet.answer_true) {
        if (this.currentPage != this.allList.length) {
          setTimeout(() => {
            if (this.currentPage < this.listcurret) {
              this.currentPage = this.currentPage + 1
              return
            } else
              this.listcurret = this.listcurret + 1
            this.qid = this.allList[this.currentPage - 1].id_
            this.getonequestion()
          }, 600)
        } else {
          uni.showToast({
            title: '已经到最后一题了',
            icon: 'none'
          })
        }
      }
      let date = {
        id: this.thisdet.id_,
        ischancetrue: this.allList[this.listcurret - 1].istrue,
      }
      if (this.maplist.length != 0) {
        const isResult = this.maplist.find(el => el.id == date.id)
        if (isResult == undefined) {
          this.maplist.push(date)
        } else {
          for (let i in this.maplist) {
            if (this.maplist[i].id == isResult.id) {
              this.maplist[i] = date
            }
          }
        }
      } else {
        this.maplist.push(date)
      }
      if (this.type != 2 && this.type != 3) {
        this.addanswer()
      }
      this.swiperList.push(this.thisdet)
    }
  }
}
</script>

<style lang="scss" scoped>
.answer {
  height: 100vh;
  background-color: #F5F6F9;
  display: flex;
  flex-direction: column;

  .navs {
    width: 750rpx;
    box-sizing: border-box;
    padding: 29rpx 36rpx;

    image {
      width: 34rpx;
      height: 34rpx;
    }

    .nav-titles {
      image {
        position: relative;
        top: 10rpx;
      }
    }

    .nav-title {
      flex: 1;
      font-size: 38rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #838A9D;
      margin: 0 20rpx 0 15rpx;
    }


    .nums {
      margin-left: 15rpx;
      font-size: 34rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #838A9D;
    }
  }
}

.card {
  flex: 1;

  .nums {
    font-size: 30rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
  }

  .scroll-Y {
    height: 100%;
  }

  .tools {
    padding: 20rpx 30rpx;
    width: 702rpx;
    margin: 34rpx auto 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
    overflow: hidden;

    .tool {
      display: flex;
      align-items: center;
      background-color: #0683FF;
      color: #fff;
      padding: 14rpx 52rpx;
      border-radius: 42rpx;

      &:nth-child(2) {
        background-color: #FE831C;
      }

      &:last-child {
        background-color: #FE831C;
      }

      text {
        font-size: 40rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: bold;
        color: #fff;
      }

      image {
        width: 40rpx;
        height: 40rpx;
        margin-left: 8rpx;
      }
    }
  }


  .btns {
    margin-top: 20rpx;
  }

  .btn {
    width: 702rpx;
    margin: 40rpx auto 0 20rpx;


    .nxt-btn {
      width: 100%;
      height: 92rpx;
      background: #E3E3E3;
      border-radius: 20rpx;
      height: 0;
      overflow: hidden;
      transition: height 0.25s;
      font-size: 34rpx;
    }

    .up-btn {
      font-size: 34rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #838A9D;
    }

    .down-btn {
      background-color: #03BE7A;
      color: #FFFFFF;
      font-size: 34rpx;
    }
  }
}

.bottom_bg {
  position: fixed;
  bottom: 0rpx;
  width: 770rpx;
  height: 200rpx;
  display: flex;
  padding-top: 14rpx;
  background-color: #FFFFFF;
  // align-items: center;

  .bottom_left_bg {
    width: 120rpx;
    margin-left: 30rpx;
    text-align: center;

    .left_img {
      width: 48rpx;
      height: 48rpx;
    }

    .left_title {
      font-size: 26rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #535371;
      margin-top: 8rpx;
    }
  }

  .bottom_btn {
    width: 204rpx;
    height: 88rpx;
    background: #E3E3E3;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    margin-left: 32rpx;
  }
}

.pop_bg {
  width: 750rpx;
  height: 874rpx;
  background: #FFFFFF;

  .collect_ttile {
    font-size: 40rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    margin-left: 46rpx;
  }

  .number {
    width: 60rpx;
    font-size: 32rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    margin-left: 14rpx;
  }

  .pop_number {
    font-size: 40rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    text-align: right;
    width: 130rpx;
    margin-left: 65rpx;
  }

  .pop_line {
    width: 702rpx;
    height: 1rpx;
    opacity: 1;
    background-color: #DDDDDD;
    margin: 0 auto;
    margin-top: 42rpx;
  }

  .scroll-view {
    white-space: nowrap;
    height: 680rpx;
    width: 100%;
    margin-top: 48rpx;

    .tag_bg {
      width: 94rpx;
      height: 78rpx;
      background: #F5F5F5;
      border-radius: 12rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 36rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      margin-top: 26rpx;
      margin-left: 28rpx;
    }

    .enter_tag_bg {
      width: 94rpx;
      height: 78rpx;
      background: #F5F5F5;
      border-radius: 12rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 36rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      margin-top: 26rpx;
      margin-left: 28rpx;
    }
  }
}
</style>